<template>
  <div>
    <div v-for="(item, index) in commentList" :key="item.primaryKey" class="full-box padding-10 relative-box margin-bottom-20" :class="index < commentList.length - 1 ? 'border-line' : ''" @mouseover="item.btnShow = true" @mouseleave="item.btnShow = false">
      <div class="full-box relative-box">
        <el-button v-if="item.btnShow && isLeader" type="text" class="reply-btn" @click="replyFn(item)">回复</el-button>
        <div class="flex justify-between">
          <div>{{ item.userNickName }}</div>
          <div>{{ item.createTime | formatDateTime }}</div>
        </div>
        <div class="margin-top-10 two-line-ellipsis">{{ item.commentType == 1 ? '汇报' : '留言' }}：{{ item.commentContent }}</div>
        <div class="full-box">
          <div class="img-box" v-for="image in item.imageAttachmentList" :key="image.fileKey">
            <el-image class="img cursor-pointer" :preview-src-list="item.imgList" :src="image.attachmentUrl" fit="cover"></el-image>
          </div>
        </div>
        <div class="full-box margin-top-10">
          <el-link v-for="file in item.fileAttachmentList" type="primary" class="margin-right-20" :key="file.fileKey" @click="downLoadUrl(file.attachmentUrl)">
            <i class="icon el-icon-paperclip"></i>
            <span>{{ file.attachmentName }}</span>
          </el-link>
        </div>
      </div>

      <div class="flex justify-between reply-box margin-left-30 margin-top-15" v-for="reply in item.replayList" :key="reply.primaryKey">
        <div class="flex-1">
          <span class="font-weight-700 padding-right-5">{{ reply.replyUserNickName }}</span>
          <span>回复：</span>
          <span>{{ reply.replyContent }}</span>
        </div>
        <div class="reply-time-box">{{ reply.createTime | formatDateTime }}</div>
      </div>
    </div>
    <leave-reply-message :model="replyModel" ref="message" :is-leader="isLeader" funcType="reply" @refresh="getCommentList"></leave-reply-message>
  </div>
</template>
<script>
  import leaveReplyMessage from './leaveReplyMessage.vue';
  import { apiCommentList } from '../../../api/workTrace';
  import { uploadLoad } from '@/common/js/utils';

  export default {
    name: 'commentItem',
    props: {
      isLeader: {
        type: Boolean,
        default: false,
      },

      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        commentList: [],
        replyModel:{}
      };
    },

    methods: {
      //评论列表
      async getCommentList() {
        let res = await apiCommentList({
          bizKey: this.model.primaryKey,
          replayFlag: true,
        });
        res.rows.forEach(item => {
          item.btnShow = false;
          if (item.replayList && item.replayList.length > 0) {
            item.replayList.forEach(son => {
              son.btnShow = false;
              son.imgList = [];
              son.imageAttachmentList && son.imageAttachmentList.forEach(img => {
                son.imgList.push(img.attachmentUrl);
              });
            });
          }

          item.imgList = [];
          item.imageAttachmentList && item.imageAttachmentList.forEach(img => {
            item.imgList.push(img.attachmentUrl);
          });
        });

        this.commentList = res.rows || [];
      },

      commentShowFn(son, type) {
        this.$emit('replyDo', son, type);
      },

      downLoadUrl(url) {
        uploadLoad(url);
      },

      getImgList(list) {
        list.forEach(item => {
          item.imgList = [];
          item.imageAttachmentList && item.imageAttachmentList.forEach(img => {
            item.imgList.push(img.fileUrl);
          });
        });
      },
      
      replyFn(model) {
        this.replyModel = model
        this.$refs.message.init();
      },
    },

    components: { leaveReplyMessage },
  };
</script>
<style lang="scss" scoped>
  .content-box {
    padding-bottom: 120px;
  }
  .comment-txt {
    width: 900px;
  }
  .border-line {
    border-bottom: 1px solid #f1f1f1;
  }
  .bg-f8 {
    background: #f8f8f8;
  }
  .img-box {
    width: 80px;
    height: 80px;
    margin-top: 15px;
    margin-right: 15px;
    float: left;
    .img {
      width: 80px;
      height: 80px;
    }
  }
  .reply-btn {
    position: absolute;
    right: 0;
    bottom: 0px;
  }
  .reply-box {
    padding: 5px 5px;
    background: #f8f8f8;
  }
  .reply-time-box {
    width: 115px;
  }
</style>
